<template>
  <div class="login-panel">
    <h1 class="title">
      <i class="logo"></i>
      <span class="t-text">彩壳家家政派单系统 V1.0.0</span>
    </h1>
    <div class="card">
      <div class="label">
        <el-icon><UserFilled /></el-icon>
        <span class="text">账号登录</span>
      </div>
      <pane-account ref="accountRef" />
    </div>
    <div class="controls">
      <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
    </div>
    <el-button class="login-btn" type="primary" size="large" @click="handleLoginClick">立即登录</el-button>
  </div>
</template>

<script setup>
import PaneAccount from './pane-account.vue'
import { localCache } from '../../../utils/cache'
import { ref, watch } from 'vue'

const accountRef = ref()

const isRemPwd = ref(localCache.getCache('isRemPwd') ?? false)
watch(isRemPwd, (newValue) => {
  localCache.setCache('isRemPwd', newValue)
})

const handleLoginClick = () => {
  accountRef.value.loginAction(isRemPwd.value)
}

</script>

<style lang="scss" scoped>
.login-panel {
  width: 380px;
  margin-bottom: 150px;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    font-size: 24px;
    color: #333;
    .logo {
      display: inline-block;
      width: 36px;
      height: 36px;
      background: url(../../../assets/img/logo.svg) no-repeat center center/36px 36px;
    }
    .t-text {
      margin-left: 10px;
    }
  }
  .card {
    padding: 20px 40px 20px 20px;
    border: 1px solid #dedede;
    border-radius: 10px;
    box-shadow: 0 0 10px #3f3f3f80;
    background-color: #ffffffe0;

    .label {
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #409eff;
      .text {
        margin-left: 10px;
      }
    }
  }
  .controls {
    margin-top: 10px;
  }

  .login-btn {
    margin-top: 10px;
    width: 100%;
  }
}
</style>